//定义通过ID获取页面元素的方法
var $ = function(a) {
    return document.getElementById(a);
};

//定义通过Class获取页面元素的方法
var $list = function(z) {
    return document.getElementsByClassName(z);
};

//构建一个对象
var $C = function(tag) {
    return document.createElement(tag);
};


/*
 组件

 定义方法
 var win = function(width, height, titlt, content) {
 ...
 };




 //作业要求:做一个窗口的组件
 ps: 1.模式窗口
 2.要求指定窗口的大小，标题
 3.要求能指定窗口的内容 格式如下:页面名称 xx.html
 4.能适应窗口的大小变化

 var win = function() {
 ...
 };



 win(500, 300, '我的窗口', 'cal.html');







 调用方法    属性 大小, 标题, 内容...
 win(300, 100, '新增好友', '...');


 ------------------------------------------------------
 窗口事件
 window.onload 加载
 window.onclick 点击
 window.onresize 缩放事件





 */

var globe_width = 0;
var globe_height = 0;

//窗口缩放
window.onresize = function() {
    //处理背景层
    $('win_back').style.width = document.documentElement.clientWidth + 'px';
    $('win_back').style.height = document.documentElement.clientHeight + 'px';

    //处理窗口居中的问题
    var win_inner = $('win_inner');
    win_inner.style.left = (document.documentElement.clientWidth - globe_width) / 2 + 'px';
    win_inner.style.top = (document.documentElement.clientHeight - globe_height) / 2 + 'px';
};


//定义打开窗口的方法
var win = function(winWidth, winHeight, title, cnt) {
    globe_width = winWidth;
    globe_height = winHeight;

    //用于关闭窗口
    var close = function() {
        document.body.removeChild(_back);
        document.body.removeChild(_inner);
    };

    if (true) {
        //构造一个div(背景层)
        var _back = $C('div');
        _back.id = 'win_back';
        _back.style.position = 'absolute';
        _back.style.left = 0;
        _back.style.top = 0;
        _back.style.opacity = 0.8;
        _back.style.backgroundColor = '#d4e9ff';
        _back.style.width = document.documentElement.clientWidth + 'px';
        _back.style.height = document.documentElement.clientHeight + 'px';
        document.body.appendChild(_back);
    }//窗口背景

    //添加div
    var add= function (name) {
        //添加div
        var div= document.createElement('div');
        div.textContent = name;
        div.className = 'litem';
        //添加div里的删除功能
        var x= document.createElement('span');
        x.style.float = 'right';
        x.style.marginRight = '5px';
        x.style.cursor = 'pointer';
        x.textContent = 'x';
        x.title = '删除';

        x.onclick = function () {
            if (confirm('你是否要删除？')){
                $('liv').removeChild(this.parentNode)
            }
        };
        div.appendChild(x);
        //div的点击事件
        div.onclick = function () {
            if ( null != select ){
                select.style.backgroundColor = "";
            }
            this.style.backgroundColor = "#9ab4ef";
            select = this;
        };
        return div;
    };


    if (true) {
        //构造窗口内容
        var _inner = $C('div');
        _inner.id = 'win_inner';
        _inner.style.position = 'absolute';
        _inner.setAttribute('win_width', winWidth);
        _inner.setAttribute('win_height', winHeight);
        /*_inner.win_width = winWidth;
         _inner.win_height = winHeight;*/
        _inner.style.left = (document.documentElement.clientWidth - winWidth) / 2 + 'px';
        _inner.style.top = (document.documentElement.clientHeight - winHeight) / 2 + 'px';
        _inner.style.width = winWidth + 'px';
        _inner.style.height = winHeight + 'px';
        _inner.style.border = '1px solid #3560ff';
        _inner.style.backgroundColor = 'white';
        document.body.appendChild(_inner);
        //窗口标题栏
        var _bar = $C('div');
        _bar.style.opacity = 0.8;
        _bar.style.backgroundColor = '#d4e9ff';
        _bar.style.width = winWidth + 'px';
        _bar.style.hegiht = '100px';
        _bar.style.border = '1px solid #3786a9';
        _inner.appendChild(_bar);
    }//窗口的标题
//文本框
    var f_name = document.createElement("div");
    f_name.style.height = "40px";
    f_name.style.width = "300px";
    f_name.style.position = "relative";
    f_name.style.lineHeight = "40px";
    f_name.style.backgroundColor= "#d6d0d7";
    _inner.appendChild(f_name);
    var ff = document.createElement("div");
    ff.style.height = "40px";
    ff.style.width = "80px";
    ff.style.position = "absolute";
    ff.style.lineHeight = "40px";
    ff.textContent = "好友名称";
    f_name.appendChild(ff);
    var f_input = document.createElement("input");
    f_input.style.position = "absolute";
    f_input.style.right = 0;
    f_input.style.top = 10 + "px";
    f_input.id = "txt";
    f_input.value = "";
    f_name.appendChild(f_input);


    if (true) {
        //标题和关闭按钮
        var _title = $C('div');
        _title.style.borderBottom = '1px solid #3560ff';
        _title.textContent = title;
        var _del = $C('span');
        _del.style.float = 'right';
        _del.style.cursor = 'pointer';
        _del.title = '关闭';
        _del.textContent = 'X';
        _del.onclick = function() {
            close();
        };
        _title.appendChild(_del);
        _bar.appendChild(_title);
    }//窗口的标题的关闭

    //窗口的内容
   // cnt.style.display = 'block';
    //_inner.appendChild(cnt);
    //...

    if (true) {
        var _sub = $C('div');
        _sub.style.textAlign = 'center';
        _sub.style.marginTop = '10px';
        _inner.appendChild(_sub);

        var _btn1 = $C('button');
        _btn1.style.width = '80px';
        _btn1.style.height = '28px';
        _btn1.innerText = '保存';
        _btn1.onclick = function() {
            var dd = add($('txt').value);
            $('liv').appendChild(dd);
            close();
        };
        _sub.appendChild(_btn1);

        var _btn2 = $C('button');
        _btn2.style.width = '80px';
        _btn2.style.height = '28px';
        _btn2.innerText = '关闭';
        _btn2.onclick = function() {
            close();
        };
        _sub.appendChild(_btn2);
    }//窗口的按钮

};